<template>
  <div class="item_container_tab">
     <div class="item_wrapper_tab">
        <tabBarIndex v-for="(item,index) in items" :key="index" :item="item"
         :index="index"
         :status="status"
         @change="change"
         />
     </div>
  </div>
</template>

<script>
import tabBarIndex from './tabBarIndex'
export default {
    components:{
        tabBarIndex
    },
    data(){
        return {
            status:0
        }
    },
    
    props:{
        items:{
            type:Array,
            required:true
        }
    },

    methods:{
        change(index){
            this.status = index
        }
    }
}
</script>

<style scoped>
.item_container_tab {
    width: 100%;
    height: 64px;
    border-top: 0.5px solid red;
    position: fixed;
    left: 0px;
    bottom: 0px;
}

.item_wrapper_tab{
    width: 100%;
    height: 64px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
</style>